<!DOCTYPE html>
<html>
<head>
    <title>Speed Distribution Graph</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define coordinate system parameters
        const originX = 80;
        const originY = 380;
        const axisLengthX = 350;
        const axisLengthY = 300;

        // Define points based on the origin
        const v0_x = 130;
        const A_y = 220;

        // Helper function to draw arrowheads
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }

        // Set common styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = 'italic 20px Times New Roman';

        // 1. Draw Axes
        ctx.beginPath();
        ctx.lineWidth = 1.5;
        // X-axis
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX + axisLengthX, originY);
        drawArrow(ctx, originX, originY, originX + axisLengthX, originY);
        // Y-axis
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX, originY - axisLengthY);
        drawArrow(ctx, originX, originY, originX, originY - axisLengthY);
        ctx.stroke();

        // 2. Draw Axis Labels
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        // O for Origin
        ctx.fillText('O', originX - 15, originY + 15);
        // v for x-axis
        ctx.fillText('v', originX + axisLengthX + 20, originY);
        // f(v) for y-axis
        ctx.fillText('f(v)', originX, originY - axisLengthY - 20);
        
        // 3. Draw the graph line
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.moveTo(originX, originY); // Start at (0, 0)
        const point_v0_A = { x: originX + v0_x, y: originY - A_y };
        const point_2v0_A = { x: originX + 2 * v0_x, y: originY - A_y };
        ctx.lineTo(point_v0_A.x, point_v0_A.y); // Line to (v0, A)
        ctx.lineTo(point_2v0_A.x, point_2v0_A.y); // Line to (2v0, A)
        ctx.stroke();

        // 4. Draw dashed lines and tick labels
        ctx.beginPath();
        ctx.setLineDash([5, 3]);
        ctx.lineWidth = 1;
        
        // Dashed line from (v0, 0) to (v0, A)
        ctx.moveTo(point_v0_A.x, originY);
        ctx.lineTo(point_v0_A.x, point_v0_A.y);
        
        // Dashed line from (0, A) to (v0, A)
        ctx.moveTo(originX, point_v0_A.y);
        ctx.lineTo(point_v0_A.x, point_v0_A.y);
        
        // Dashed line from (2v0, 0) to (2v0, A)
        ctx.moveTo(point_2v0_A.x, originY);
        ctx.lineTo(point_2v0_A.x, point_2v0_A.y);
        
        ctx.stroke();
        
        // Reset line dash for solid lines (for text rendering if needed)
        ctx.setLineDash([]);
        
        // Draw tick labels on axes
        ctx.font = 'italic 18px Times New Roman';
        // A on y-axis
        ctx.textAlign = 'right';
        ctx.fillText('A', originX - 10, point_v0_A.y);
        // v0 on x-axis
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('v', point_v0_A.x - 5, originY + 8);
        ctx.font = '12px Times New Roman';
        ctx.fillText('0', point_v0_A.x + 4, originY + 16);
        // 2v0 on x-axis
        ctx.font = 'italic 18px Times New Roman';
        ctx.fillText('2v', point_2v0_A.x - 5, originY + 8);
        ctx.font = '12px Times New Roman';
        ctx.fillText('0', point_2v0_A.x + 9, originY + 16);
        
        // 5. Draw Caption
        ctx.font = '20px "SimSun", "STSong"'; // Common Chinese font
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('习题 5-13 图', canvas.width / 2, canvas.height - 10);

    </script>
</body>
</html>